<template>
	<div class="list-scroll-wrapper">
		<div v-for="(item, index) in nodeList" :key="index" class="mt10 list-li">
			<div class="tipicon">
				<p class="btn-index fc">{{ index + 1 }}</p>
			</div>
			<div class="list-item-tag text-title mt10">步骤{{ index + 1 }}</div>
			<div class="item-title">
				<span class="text-label">审批层级</span>
				<span class="text-tag bg1">{{ labelStr.approvalHierarchy[item.approvalHierarchy] }}</span>
			</div>

			<div class="item-title">
				<span class="text-label">周期</span>
				<span class="text-tag bg2">{{ labelStr.cycle[model.cycle] }}</span>
			</div>

			<div class="item-title">
				<span class="text-label">驳回层级</span>
				<span class="text-tag bg3">{{ labelStr.rejectHierarchy[item.rejectHierarchy] }}</span>
			</div>

			<div class="item-title">
				<span class="text-label">审核方式</span>
				<span class="text-tag bg4">{{ labelStr.approvalWay[item.approvalWay] }}</span>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
const props = defineProps<{
	nodeList: any
	model: any
}>()

const labelStr = {
	approvalHierarchy: {
		1: '所属社区',
		2: '所属街道',
		3: '所属区',
		4: '市级',
		5: '第三方',
	},
	approvalWay: {
		1: '或签（一人签署则审批通过）',
		2: '会签（全部签署则审批通过）',
	},
	rejectHierarchy: {
		1: '驳回至数据提交方',
		2: '驳回至上级',
	},
	cycle: {
		1: '月',
		2: '季度',
		3: '半年',
		4: '年',
	},
}
</script>

<style scoped lang="scss">
.bg1 {
	background: #e2fff4;
}

.bg2 {
	background: #e3e2ff;
}

.bg3 {
	background: #fbffe2;
}

.bg4 {
	background: #ffe2f9;
}

.text-title {
	font-family: 'Microsoft YaHei Bold';
	font-weight: 700;
	font-size: 16px;
	line-height: 22px;
	text-align: left;
	color: #000;
}


.list-scroll-wrapper {
	padding: 20px 0;
	width: auto;
	display: flex;
	flex-flow: row;
	overflow-x: auto;
	white-space: nowrap;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	white-space: nowrap;
	background-color: #fff;

	.list-li {
		scroll-snap-align: start;
		min-width: vw(300);
		width: 100%;
		.tipicon {
			position: relative;
			z-index: 0;

			.btn-index {
				color: #fff;
				width: 24px;
				height: 20px;
				border-radius: 4px;
				background: #4787f0;
			}

			&::after {
				content: '';
				position: absolute;
				width: 100%;
				top: 50%;
				border: 1px dashed #707070;
				z-index: -1;
			}
		}

		.item-title {
			display: flex;
			gap: 10px;
			margin-top: 4px;
			border-radius: 6px;

			.text-label {
				font-size: 16px;
				font-weight: 400;
				color: #181818;
			}

			.text-tag {
				padding: 4px 16px;
				border-radius: 6px;
			}
		}
	}
}
</style>
